import { defineComponent, Ref, ref, watch } from 'vue';
import {
  getEditorEmits,
  getRawProps,
  useNamespace,
} from '@ibiz-template/vue3-util';
import { RawEditorController } from '../raw-editor.controller';

export const IBizRaw = defineComponent({
  name: 'IBizRaw',
  props: getRawProps<RawEditorController>(),
  emits: getEditorEmits(),
  setup(props) {
    const ns = useNamespace('raw');
    const c = props.controller;
    const editorModel = c.model;

    // 传入内容
    const content: Ref<string | number | undefined> = ref('');

    watch(
      () => props.value,
      (newVal, oldVal) => {
        if (newVal !== oldVal) {
          content.value = newVal;
        }
      },
      {
        immediate: true,
      },
    );

    // 类型
    let type = 'TEXT';
    if (editorModel.editorParams?.contentType) {
      type = editorModel.editorParams.contentType;
    }

    return {
      ns,
      content,
      type,
    };
  },
  render() {
    return (
      <div
        class={[
          this.ns.b(),
          this.disabled ? this.ns.m('disabled') : '',
          this.readonly ? this.ns.m('readonly') : '',
        ]}
      >
        {this.content && (
          <iBizRawItem
            class={this.ns.b('content')}
            content={this.content}
            type={this.type}
          ></iBizRawItem>
        )}
      </div>
    );
  },
});
